<template>
    <div class="container">
        <div class="header-box">
            <el-page-header @back="goBack"></el-page-header>
            <h2 class="title">知识问答</h2>
        </div>
        <div class="content">
            <div>
                <ChoiceQuestionItem v-if="showQuestion.type == '1'" :question="showQuestion" @next="nextQuestion"></ChoiceQuestionItem>
                <JudgeQuestionItem v-else-if="showQuestion.type == '2'" :question="showQuestion"></JudgeQuestionItem>
            </div>
            <div class="speak">
                <el-input type="textarea" :rows="2" placeholder="说点什么" v-model="speakContent" resize="none">
                </el-input>
                <el-button size="mini" class="submit-btn" type="primary" @click="addComment">发表</el-button>
            </div>
            <ul class="comment" v-if="commentList.length > 0">
                <li class="comment-item" v-for="item in commentList" :key="item.id">
                    <div class="head-box">
                        <h3>{{ item.createByName }}：</h3>

                    </div>
                    <p>{{ item.comment }}</p>
                </li>
            </ul>
            <ul v-else class="comment">暂无评论</ul>
        </div>
    </div>
</template>
<script>
import { getQuestionList, getQuestionComment, addQuestionComment } from '@/utils/request.js';
export default {
    name: 'Question',
    components: {
        ChoiceQuestionItem: () => import(/** webpackChunkName: "ChoiceQuestionItem" */ '@/components/ChoiceQuestionItem.vue'),
        JudgeQuestionItem: () => import(/** webpackChunkName: "JudgeQuestionItem" */ '@/components/JudgeQuestionItem.vue')
    },
    data() {
        return {
            // question: {
            //     "createById": "1000000000000000001",
            //     "createByName": "admin",
            //     "createTime": "2024-04-07 09:46:47",
            //     "updateById": null,
            //     "updateByName": null,
            //     "updateTime": "2024-04-07 09:46:46",
            //     "deleted": 0,
            //     "params": {},
            //     "id": "1",
            //     "type": "1",
            //     "problemDescription": "认识小阿jiao吗?",
            //     "optionInfo": null,
            //     "answer": "A",
            //     "optionsI": "A~:~喜欢|*|B~:~不喜欢|*|C~:~giao|*|D~:~啤酒小游戏"
            // },
            question: {},
            speakContent: "",
            listQuery: {
                roleName: "",
                pageNo: 1,
                pageSize: 1000
            },
            list: [],
            count: 0,
            activeIndex: -1,
            commentList: []
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getList();
        },
        getList() {
            getQuestionList(this.listQuery).then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.count = res.data.count;
                    this.count > 0 && (this.activeIndex = 0);
                }
            }).catch(err => {
                console.log(err);
            })
        },
        getComment() {
            if(this.list.length == 0) {
                return
            }
            let form = {
                quesionId: this.list[this.activeIndex].id
            }
            getQuestionComment(form).then(res => {
                if (res.code == 200) {
                    this.commentList = res.data;
                }
            })
        },
        addComment() {
            if(this.speakContent == '') {
                return
            }
            let form = {
                "quesionId": this.showQuestion.id,
                "comment": this.speakContent
            }
            addQuestionComment(form).then(res => {
                this.speakContent = '';
                this.getComment();
            })
        },
        nextQuestion() {
            console.log(this.activeIndex + 1);
            if(this.activeIndex + 1 < this.count) {
                this.activeIndex ++;
            } else {
                alert('没有更多的题目了')
            }
        },
        goBack() {
            this.$router.go(-1);
        }
    },
    computed: {
        showQuestion() {
            let target = this.list[this.activeIndex];
            return target ? target : this.question;
        }
    },
    watch: {
        activeIndex: {
            handler() {
                setTimeout(() => {
                    this.getComment();
                })
            },
            immediate: true
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    padding: 0px 20%;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    color: #000;
    // background-image: url('https://img0.baidu.com/it/u=3374457457,1568455842&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: auto;
    .header-box {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .el-page-header {
            position: absolute;
            left: 0;
        }
        .title {
            height: 5vh;
            background-color: #fff;
            line-height: 5vh;
            margin: 20px 0;
        }
    }

    .content {
        height: calc(95vh - 40px);
        background-color: #fff;
        padding: 30px 50px;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid #000000;

        .speak {
            margin-top: 10px;
            text-align: right;

            .submit-btn {
                margin-top: 10px;
            }
        }

        .comment {
            margin-top: 10px;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 50vh;
            overflow-y: scroll;

            .comment-item {
                text-align: left;
                padding: 0 10px;
                box-sizing: border-box;
                margin-bottom: 10px;

                >p {
                    font-size: 14px;
                    margin: 10px 0;
                }

            }

            .comment-item:not(:last-of-type) {
                border-bottom: 1px solid #ccc;
            }
        }

        .comment::-webkit-scrollbar {
            display: none;
        }
    }
}
</style>